<template>
  <div class="jobDistributionByUser">
      <Card>
        <Row style="padding: 0 20px" v-if="showTest">
          <Col span="5"  v-for="myData1 in myDatas" style="margin: 15px 2%" v-if="myData1['staff_id']">
            <Card>
              <p slot="title">人员</p>
              <p>员工id：{{myData1["staff_id"]}}</p>
              <p>已接受任务数：{{myData1["count(1)"]}}</p>
              <Button @click="distribution(myData1['staff_id'])">分配</Button>
            </Card>
          </Col>
        </Row>
        <Row style="padding: 0 20px" v-if="!showTest">
          <Col span="5"  v-for="myData2 in myDatas2" style="margin: 15px 2%">
            <Card>
              <p slot="title">任务</p>
              <p>任务名：{{myData2.jobName}}</p>
              <p>任务赏金：{{myData2.gold}}</p>
              <p>任务时间：{{myData2.createTime}}</p>
              <Button @click="distribution2(myData2.jobId)">分配</Button>
            </Card>
          </Col>
        </Row>
      </Card>
<!--    <Modal-->
<!--      v-model="show"-->
<!--      title="我的信息">-->
<!--      <jobDistributionByJob :userId="userId" v-if="show"></jobDistributionByJob>-->
<!--    </Modal>-->
  </div>
</template>
<script>
  // import jobDistributionByJob from "./jobDistributionByJob";
  import axios from "axios";
  export default {
    name: "jobDistributionByUser",
    props: {
      test:{
        type:Boolean,
      }
    },
    components:{
      // jobDistributionByJob,
    },
    data() {
      return {
        userId:'',
        userDis:'',
        jobDis:'',
        jobUser:{},
        showTest:false,
        myDatas:[{
          // uNick:'',
          // count:'',
        }],
        myDatas2:[{
          jobName:'',
          jobId:'',
          gold:'',
          createTime:'',
        }],
        searchForm: {
          pageNumber:1,
          pageSize:999,
          jobState: '1',
        },
      }
    },
    methods:{
      distribution(v){
        if (this.jobDis!=''){
          if (this.userDis ==null || this.userDis ==''){
            this.userDis = v
            this.distributionJob()
            this.$Message.success("分配成功")
            this.getUserData()
            this.getJobData2()
            this.userDis = ''
            this.jobDis = ''
          }else{
            this.$Message.error("分配错误")
            this.userDis = ''
            this.jobDis = ''
            this.showTest = !this.showTest
          }
        } else{
          this.userDis = v
          this.showTest = !this.showTest
        }
      },
      distribution2(v){
        if (this.userDis!=''){
          if (this.jobDis ==null || this.jobDis ==''){
            this.jobDis = v
            this.$Message.success("分配成功")
            this.distributionJob()
            this.getUserData()
            this.getJobData2()
            this.userDis = ''
            this.jobDis = ''
          }else{
            this.$Message.error("分配错误")
            this.userDis = ''
            this.jobDis = ''
            this.showTest = !this.showTest
          }
        } else{
          this.jobDis = v
          this.showTest = !this.showTest
        }
      },
      getUserData(){
        axios.get('http://localhost:8888/jobController/queryAllUserJob').then(res =>{
          this.myDatas = res.data
        })
      },
      getJobData2(){
        axios.get('http://localhost:8888/jobController/queryAll',{params: this.searchForm}).then(res =>{
          this.myDatas2 = res.data.list
        })
      },
      distributionJob(){
        this.jobUser = {staffId: this.userDis,jobId:this.jobDis,jobState:'2'}
        axios.get('http://localhost:8888/jobController/changeJobState',{params: this.jobUser}).then(res =>{
          this.myDatas2 = res.data.list
        })
      }
    },
    mounted() {
      this.getUserData()
      this.getJobData2()
      this.showTest = this.test
    }
  }
</script>

<style scoped>
  .jobDistributionByUser{
  }
  .ivu-card >>> .ivu-card-head{
    background-color: #2d8cf0;
  }
  .ivu-card{
    border-radius: 16px;
  }
</style>
